<template>
    <div class="dm">
        <canvas id='dm'>

        </canvas>
    </div>
</template>

<script>
export default {
    props:[
        "fontsize",
        'showtime',
        'dm',
    ],
    data(){
        return{
            showDm:[],
            dl:[],
            pause:false,
        }
    },
    methods:{
        setShowDm(now,old){
            if (now < old) {
                return 0;
            }
            this.showDm = this.dm.filter((res) => {
                return res.p[0] <= now && res.p[0] > old;
            });
            for(var i=0;i<this.showDm.length;i++){
                for(var j=0;j<this.dl.length;j++){
                    var d=new this.D(this.showDm[i].text,this.getcolor(this.showDm[i].p[3]))
                    if(this.dl[j].length==0){
                        this.dl[j].push(d)
                        break;
                    }
                    else{
                        var length=this.dl[j].length
                        // if(this.dl[j][length-1].width>=d.width&&this.dl[j][length-1].x<this.canvas.width){
                        //     this.dl[j].push(d)
                        //     break;
                        // }
                        // else{
                            if(((this.dl[j][length-1].x+this.dl[j][length-1].width)/this.dl[j][length-1].speed<=d.x/d.speed)&&this.dl[j][length-1].x+this.dl[j][length-1].width<=d.x){
                                this.dl[j].push(d)
                                break;
                            }
                        // }
                    }
                }
            }
        },

        getcolor(s){
            var num=Number(s)
            var b=num%256
            var g=(num-b)/256%256
            var r=(num-b-g*256)/256/256
            return 'rgb('+r+','+g+','+b+')'
        },

        render(duration){
            this.ctx.font=this.fontsize+'px Arial'
            this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
            for(var i=0;i<this.dl.length;i++){
                this.ctx.font=this.fontsize+'px';
                for(var j=this.dl[i].length-1;j>=0;j--){
                    if(this.dl[i][j].offsetright<=0){
                        this.dl[i].splice(j,1)
                        continue
                    }
                    this.dl[i][j].x-=this.dl[i][j].speed*duration
                    this.ctx.fillStyle=this.dl[i][j].color
                    this.ctx.fillText(this.dl[i][j].text,this.dl[i][j].x,i*this.fontsize*1.5+this.fontsize)
                }
            }
        },

        play(){
            this.draw=setInterval(()=>{
                this.render(20)
            },20)
        },

        resize(){
            this.canvas.height=document.getElementsByClassName('player')[0].clientHeight
            this.canvas.width=document.getElementsByClassName('player')[0].clientWidth
            var length=parseInt(this.canvas.height/this.fontsize/1.5);

            if(length>this.dl.length){
                for(var i=this.dl.length;i<length;i++){
                    this.dl.push(new Array(0))
                }
            }
            else{
                this.dl.splice(length)
            }
            console.log(this.dl.length)
        },
    },

    watch:{
        pause(now){
            if(now==true){
                clearInterval(this.draw)
            }
            else{
                this.play()
            }
        }
    },

    mounted(){
        var length=parseInt(document.getElementsByClassName('player')[0].clientHeight/this.fontsize/1.5);
        this.dl=new Array(length)
        for(var i=0;i<length;i++){
            this.dl[i]=new Array(0)
        }
        console.log(document.getElementById('dm').getContext('2d'))
        this.canvas=document.getElementById('dm')
        this.ctx=this.canvas.getContext('2d')
        this.canvas.height=document.getElementsByClassName('player')[0].clientHeight
        this.canvas.width=document.getElementsByClassName('player')[0].clientWidth
        var that=this
        this.D=function(text,color){
            this.text=text
            this.color=color
            this.width=that.ctx.measureText(this.text).width
            this.x=document.getElementsByClassName('player')[0].clientWidth
            this.speed=(this.width+document.getElementsByClassName('player')[0].clientWidth)/that.showtime
        }
        this.play()
        window.onresize=()=>{
            this.resize()
        }
    }
}
</script>

<style>
.dm{
    height: 100%;
    width: 100%;
    position:absolute;
    top:0;
    z-index:98;
}
</style>